import React from 'react'
import * as action from "../action"
import {useSelector,useDispatch} from "react-redux"
import {useEffect} from "react"
import {useNavigate} from "react-router-dom"
import { ProductCard, Tag, Button } from 'react-vant';
function Shophome() {
 let dispatch = useDispatch()
 let navigate = useNavigate()
  let store = useSelector((state)=>{
      return {
          ...state.shopreducer
      }
  })
  const goDetail = (item)=>{
        navigate("/detail",{
            state:{
                item
            }
        })
  }
//   console.log(store);
  useEffect(()=>{
    // 执行一个dispatch来触发一个action，修改state
    dispatch(action.getlist())
  },[])
  return (
    <div style={{overflowY:"auto"}}>
        {
            store.arr && store.arr.length ? store.arr.map((item,index)=>{
                return  <ProductCard
                num={item.num}
                price={item.price}
                desc={item.title}
                title={item.title}
                thumb={item.img}
                key = {index}
                onClick={()=>goDetail(item)}
              />
            }):"暂无数据"
        }
    
    </div>
  )
}

export default Shophome